/*
注册的路由组件
 */

import React, {Component} from 'react'
import {
  NavBar,
  WingBlank,
  WhiteSpace,
  Button
} from 'antd-mobile'
import {Input , Radio, message} from 'antd'
import {connect} from 'react-redux'
import {Redirect} from 'react-router-dom'
import {resetUser,register} from '../../redux/actions'
import Logo from '../../components/logo/logo'


class Register extends Component {
  state = {
    username: '',  
    password: '',  
    password2: '',  
    type: 'laoban',  
  }

  register = () => {
    //console.log(this.state)
    const {password,password2} = this.state
    if(!password){
      message.error('密码不能为空')
      return
    }
    if(!password2){
      message.error('重新输入密码不能为空')
      return
    }
    this.props.register(this.state)
  }

  handleChange = (name, val) => {
    // 更新状态
    this.setState({
      [name]: val  // 属性名不是name, 而是name变量的值
    })
  }

  toLogin = () => {
    this.props.resetUser()
    this.props.history.replace('/login')
  }

  render() {
    const {type , username , password , password2} = this.state
    const {msg, redirectTo} = this.props.user
    if(redirectTo) {
      return <Redirect to={redirectTo}/>
    }
    if(msg){
      message.error(msg)
      this.props.resetUser()
    }
    return (
      <div>
        <NavBar className='main-header' >大&nbsp;大&nbsp;直&nbsp;聘</NavBar>
        <Logo/>
        <WingBlank>
            <WhiteSpace/>
            <Input size="large" placeholder='请输入用户名' value={username} onChange={e => {
                  this.setState({ username: e.target.value })
                }} addonBefore="&nbsp;用 户 名:&nbsp;" />
            <WhiteSpace/>
            <Input.Password  size="large" placeholder='请输入密码' value={password} 
            onChange={e => {
                  this.setState({ password: e.target.value })
                }} addonBefore="&nbsp; 密 &nbsp;码 : &nbsp;" />
            <WhiteSpace/>
            <Input.Password  size="large" placeholder='请输入密码' value={password2} 
            onChange={e => {
                  this.setState({ password2: e.target.value })
                }} addonBefore="确认密码:" />
            <WhiteSpace/>
            <Input size="large"  addonBefore="用户类型:" disabled={true}
            addonAfter={
              <Radio.Group onChange={e=>this.setState({type:e.target.value})} value={type} >
              <Radio value={'dashen'}>大神</Radio>
              <Radio value={'laoban'}>老板</Radio>
              </Radio.Group>
            }/>
            <WhiteSpace/>
            <WhiteSpace/>
            <Button type='primary' onClick={this.register} className='main-header' >注&nbsp;&nbsp;&nbsp;册</Button>
            <WhiteSpace/>
            <Button onClick={this.toLogin}>已有账户</Button>
        </WingBlank>
      </div>
    )
  }
}

export default connect(
  state => ({user: state.user}),
  {register,resetUser}
)(Register)